﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客文章类别</title>
    <script src="~/lib/vue.js"></script>

    <script src="/lib/jquery/dist/jquery.js"></script>



    <script src="~/lib/axios.js"></script>

    <style>
        #NewType {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            margin: 0 auto;
        }


        .hide {
            display: none;
        }

        .modal {
            /* 上左定位50%后 上左margin-高度和宽度的一半保证div在中心位置 */
            position: fixed;
            left: 50%;
            top: 50%;
            width: 700px;
            height: 200px;
            margin-left: -350px;
            margin-top: -100px;
            z-index: 10;
            background-color: #ffff;
        }

        .shade {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

        .Huiform {
            margin-top: 80px;
        }

        table {
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }
        table,
        th {
           
            border-collapse: collapse;
            font-size: 15px;
            font-family: Arial;
            /*width: 400px;*/ /*要显示文字的宽度*/
            text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
            /*overflow: hidden;*/ /*超出要隐藏*/
        }
        
   table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
            .cl {
           padding:3px 3px;
            /* 去掉按钮边框 */
            border: none;
            cursor: pointer;
            color: #fff;
            /* 设置圆角角度 */
            border-radius: 5px 5px 5px 5px;
            /* 移动鼠标前的效果 渐变色 */
            background-image: linear-gradient(#5883a4, #2e7497);
        }

            .cl:hover {
                /* 移动鼠标后的效果 渐变色 */
                background-image: linear-gradient(#0e6e97, #075988);
            }
        .text-c {
            color: rgb(144, 147, 153);
            z-index: 1;
        }
        #bannerTable {
            width: 100%;
        }
        #text-k {
            color: #606266;
        }
        .tr-1:hover {
            background-color: antiquewhite;
        }
        /* a链接去除下划线*/
        a {
            text-decoration: none;
        }
        .h-1 {
            color: #666666;
            font-size: 20px;
            line-height: 39px;
            position: absolute;
            top: -25px;
            left: 0px;
        }
    </style>

</head>

<body>

    <div id="NewType">
        <br />  <br />  
        <div>
            <span class="l">
                <br />
                <a href="javascript:;" class="cl" v-on:click="AddNewType">添加类别</a>

            </span>
            <br />  <br />
        </div>
        <!-- 模态框 -->
        <div class="shade hide"></div>
        <div class="modal hide">
            <div class="Huiform">
                <h2 class="h-1">博客文章类别</h2>
                <label for="TypeName">博客文章类别</label><input type="text" v-model="TypeName" name="TypeName"><input class="xs" v-on:click="send" type="button" value="提交">
                <button v-on:click="Close">关闭</button>

            </div>

        </div>
        <table id="bannerTable">
            <thead>
                <tr class="text-c">

                    <th>ID</th>
                    <th>类别名称</th>

                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="text-k">
                <tr v-for="item  in  NewsType" :key="item.typeId" class="tr-1">

                    <td>{{item.typeId}}</td>
                    <td>{{item.typeName}}</td>

                    <td>这里是{{item.typeName}}</td>
                    <td><a href="#" v-on:click="delelt(item.typeId)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

<script>

    var app = new Vue({
        el: '#NewType',
        data: {
            TypeName: '',
            NewsType: []
        },
        mounted() {
            axios({
                method: 'Get',
                url: '/admin/GetNewsType'
            }).then(res => {
                if (res.data.code == 200) {
                    this.NewsType = res.data.data;
                    console.log(this.NewsType);
                    console.log(this.NewsType[0].typeName);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        methods: {
            AddNewType() {
                $('.hide').removeClass('hide');
            },
            delelt(typeid) {
                var id = typeid;
                console.log(id);

                axios({
                    method: 'Get',
                    url: '/admin/DeleteNewType',
                    params: { TypeId: id }
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        alert("删除成功");
                    } else {
                        alert(res.data.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            Close() {
                $('.modal,.shade').addClass('hide');
            },
            send() {
                console.log(this.TypeName);
                axios({
                    method: 'Get',
                    url: '/admin/AdminAddNewsType',
                    params: { TypeName: this.TypeName }
                }).then(res => {
                    console.log(res);
                    alert("提交博客文章类别成功");
                    if (res.data == 1) {
                        $('.modal,.shade').addClass('hide');
                    }
                });
            }
        }
    });


  //      var app = new Vue( {
  //      el:'#NewType',
  //      data:{
  //    TypeName:'',
        
  //        NewsType:[]
  //      },
  //      mounted(){
  //             axios({
  //         method:'Get',
  //         url:'/admin/GetNewsType'

  //         }).then(res=>{
  //  if(res.data.code==200){

  //    this.NewsType=res.data.data;
  //    console.log(this.NewsType);
  //    console.log(this.NewsType[0].typeName);

  //  }


  //         }).catch(err=>{
  //         console.log(err);
  //         }

  //         )

  //      },

  //      updated(){
  //         axios({
  //         method:'Get',
  //         url:'/admin/GetNewsType'

  //         }).then(res=>{
  //  if(res.data.code==200){

  //    this.NewsType=res.data.data;


  //  }


  //         }).catch(err=>{
  //         console.log(err);
  //         }

  //         )

  //      },
  //      methods:{
  //      AddNewType(){
  //           $('.hide').removeClass('hide');

  //      },
  //      delelt(typeid){
  //   var id = typeid;
  //   console.log(id);

  ////   axios.post('/admin/DeleteNewType', {
  ////              TypeId:1
  ////})
  ////.then(function (res) {
  ////  console.log(res);
  ////})
  ////.catch(function (error) {
  ////  console.log(error);
  ////});

  //             axios({
  //         method:'Get',
  //         url:'/admin/DeleteNewType',
  //       params:{TypeId:id}
  //         }).then(res=>{
  //             console.log(res);
  //  if (res.data.code == 200) {
  //      alert("删除成功");
        

  //  } else {
  //      alert(res.data.message);
  //  }
  //        }).catch(err=>{
  //         console.log(err);
  //         }

  //         )


  //    //删除
  //     }
  //      ,
  //      Close(){
  //         $('.modal,.shade').addClass('hide');

  //      },
  //      send(){
  //          console.log(this.TypeName);
  //         axios({
  //         method:'Get',
  //         url:'/admin/AdminAddNewsType',
  //         params:{TypeName:this.TypeName}

  //         }).then(res=>{
  //         console.log(res);
  //                  alert("提交博客文章类别成功");
  //         if(res.data==1)
  //         {
            
  //                $('.modal,.shade').addClass('hide');

  //         }

  //         })

  //         }


  //      }

  //      });







    //  $(function(){
    //      //添加按钮
    //      $('.cl').click(function(){
    //            $('.hide').removeClass('hide');
    //        });
    //         //取消按钮
    //         $('.xs').click(function(){

    //            $('.modal,.shade').addClass('hide');

    //        });
    //$('.cl').click(function(){

    //});

</script>